<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>廖雪峰javascript全栈教程--事件(作业)</title>

</head>
<body>
<a href="https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143564690172894383ccd7ab64669b4971f4b03fa342d000#0">
    教程地址戳这里！</a>
<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label>
            <a href="#0" class="invertSelect">反选</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p>
            <button type="submit">Submit</button>
        </p>
    </fieldset>
</form>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript">
    //原作者的准备代码
    'use strict';

    var
        form = $('#test-form'),
        langs = form.find('[name=lang]'),
        selectAll = form.find('label.selectAll :checkbox'),
        selectAllLabel = form.find('label.selectAll span.selectAll'),
        deselectAllLabel = form.find('label.selectAll span.deselectAll'),
        invertSelect = form.find('a.invertSelect');

    // 重置初始化状态:
    form.find('*').show().off();
    form.find(':checkbox').prop('checked', false).off();
    deselectAllLabel.hide();
    // 拦截form提交事件:
    form.off().submit(function (e) {
        e.preventDefault();
        alert(form.serialize());
    });


    // TODO:绑定事件
    //我自己改学习后的代码,后面附上几段别人写的不错的代码
    //refresh = function () {  这样写会报 "refresh" undefined 的错误,必须加上 var
    var refresh = function () {
        //console.log(selectAll);
        console.log(langs.filter(':checked').length);
        if (langs.filter(':checked').length === langs.length) {
            selectAll.prop('checked', true);
            deselectAllLabel.show();
            selectAllLabel.hide();
        }
        else {
            selectAll.prop('checked', false);
            deselectAllLabel.hide();
            selectAllLabel.show();
        }
    }

    selectAll.on('change', function () {
        if (selectAll.prop('checked')) {
            langs.prop('checked', true);
        }
        else {
            langs.prop('checked', false);
        }
        refresh();
    });

    langs.on('change', function () {
        refresh();
    });

    invertSelect.on('click', function () {
        langs.map(function () {
            if ($(this).prop('checked')) {
                $(this).prop('checked', false);
            }
            else {
                $(this).prop('checked', true);
            }
        });
        refresh();
    });

</script>
//下面是其他同学的答案
<script>
    var pingbi = function () {
        //把别人的示例代码包裹在函数中，屏蔽起来，下面几行用于屏蔽变量
        var form = '',
            langs = '',
            selectAll = '',
            selectAllLabel = '',
            deselectAllLabel = '',
            invertSelect = '';

////////////////////////////////例一：代码思路不错/////////////////////////////////////////////////////
        function refresh() {
            let full = (langs.filter(':checked').length == langs.length);
            if (full) {
                selectAllLabel.hide();
                deselectAllLabel.show();
                selectAll.prop('checked', true);
            } else {
                selectAllLabel.show();
                deselectAllLabel.hide();
                selectAll.prop('checked', false);
            }
        }

        selectAll.on('click', function () {
            langs.prop('checked', selectAll.prop('checked'));
            refresh();
        });
        //下面这段写的很精彩！！
        invertSelect.on('click', function () {
            let c1 = langs.filter(':checked');
            langs.prop('checked', true);
            c1.prop('checked', false);
            refresh();
        });
////////////////////////////////例二：用了箭头函数/////////////////////////////////////////////////////
        // TODO:绑定事件
//当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
        selectAll.change(() = > {
            if($(selectAll).is(":checked")
    )
        {
            selectAllLabel.hide();
            deselectAllLabel.show();
            langs.prop("checked", "checked");
        }
//当用户去掉“全不选”时，自动不选中所有语言；
    else
        {
            selectAllLabel.show();
            deselectAllLabel.hide();
            langs.prop("checked", false);
        }
    })

//当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
        invertSelect.click(function () {
            langs.map(function () {
                if ($(this).is(":checked")) {
                    $(this).prop("checked", false);
                }
                else {
                    $(this).prop("checked", true);
                }
                langs.change();

            })
        })
//当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
        langs.change(function () {
                if ($("input[name=lang]:checked").length === 5) {
                    selectAll.prop('checked', true);
                    selectAllLabel.hide();
                    deselectAllLabel.show();
                }
//当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
                else {
                    selectAll.prop('checked', false);
                    selectAllLabel.show();
                    deselectAllLabel.hide();
                }
            }
        );
    }
</script>
</body>
</html>